<template>
  <el-table ref="tableRef" :data="simulationData" v-bind="$attrs">
    <!-- 1.传入showSelectColumn时展示的全选列 -->
    <template v-if="showSelectColumn">
      <el-table-column type="selection" />
    </template>
    <!-- 2.传入showIndexColumn时展示的序号列 -->
    <template v-if="showIndexColumn">
      <el-table-column type="index" label="序号" align="left" width="60" />
    </template>
    <!-- 3.propList里面的所有列 -->
    <template v-for="item in propList" :key="item.prop">
      <el-table-column v-bind="item" :show-overflow-tooltip="showOverflowTooltip">
        <!-- 传有slotName时展示的插槽列 -->
        <template #default="scope" v-if="item.filter">
          {{ item.filter(scope.row[`${item.prop}`]) }}
        </template>
        <template #default="scope" v-else-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script setup lang="ts">
import { ColumnOption } from "./tableType";
interface Props {
  propList: ColumnOption[]; //表格行el-table-column配置项
  showIndexColumn?: boolean; //是否显示索引列
  showSelectColumn?: boolean; //是否显示全选列
  showPagination?: boolean; //是否显示分页
  childrenProps?: object; // 是否有子数据，树形数据才用得到
  showOverflowTooltip?: boolean; // 是否隐藏额外内容
  simulationData?: any; // 是否自定义数据
}
const {
  showIndexColumn = false,
  showSelectColumn = false,
  showPagination = false,
  showOverflowTooltip = true,
} = defineProps<Props>();
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-success-light-7);
}

/* 机器人运行任务 */
.el-table .abnormal-row {
  --el-table-tr-bg-color: #ff5733;
}
.el-table .successBox-row {
  --el-table-tr-bg-color: #ffffff;
}
.el-table .avoidance-row {
  --el-table-tr-bg-color: #ffc300;
}
.el-table .pause-row {
  --el-table-tr-bg-color: #454545;
}
</style>
